查詢功能

在前端 cshtml 先做查詢元件
這邊就對使用者做模糊查詢

程式碼如下:

@using (Html.BeginForm("Index", "Employee", FormMethod.Post))
    {
        <input type="text" name="name" placeholder="輸入使用者名稱" />
        <input type="submit" value="查詢" />
    }

後端的很簡單就是把原本的 public ActionResult Index() 加一個參數
程式碼如下

  public ActionResult Index(string name)
        {
            string sql = " Select *  From Employee";
            if (!string.IsNullOrEmpty(name))
            {
                sql = $"select  *  from Employee where username like '%{name}%'";
            }
   
            DBHelper db = new DBHelper();

        
    SqlDataReader sqlDataReader = db.GetSqlDataReader(sql);
         
            List<Employee> Employee = new List<Employee>();

            while (sqlDataReader.Read())
            {
                Employee.Add(new Employee
                {
                    id = sqlDataReader.GetInt32(0),
                    LoginID = sqlDataReader.GetString(1),
                    Username = sqlDataReader.GetString(2),
                    Gender = sqlDataReader.GetString(3),
                    PhoneNumber = sqlDataReader.GetString(4)
                 
                });
            }

            sqlDataReader.Close();
            
            return View(Employee);
        }

執行畫面如下

複選框 CheckBox

前端 cshtml 程式如下

<table class="gridview">
        <tr>
            <th>  <input type="checkbox" id="selectAll" /></th>
            <th>帳號</th>
            <th>使用者名稱</th>
            <th>性別</th>
            <th>電話號碼</th>
            <th></th>
            <th></th>
            <th></th>
        </tr>

        @foreach (var item in Model)
        {
            <tr class="table-row">
                <td>
                    <input type="checkbox" name="selectedItems" value="@item.id" />
                </td>
                <td>@Html.DisplayFor(modelItem => item.LoginID)</td>
                <td>@Html.DisplayFor(modelItem => item.Username)</td>
                <td>@Html.DisplayFor(modelItem => item.Gender)</td>
                <td>@Html.DisplayFor(modelItem => item.PhoneNumber)</td>
                <td>@Html.ActionLink("詳細資料", "Details", new { id = item.id })</td>
                <td>@Html.ActionLink("編輯", "Edit", "Employee", new { id = item.id }, null)</td>
                <td>@Html.ActionLink("删除", "Delete", new { id = item.id }, new { @class = "btn btn-danger", onclick = "return confirm('您确定要删除吗？');" })</td>
            </tr>
        }

    </table>

重點在下圖紅框部分

控制全選與取消全選的部分

   <script src="~/Scripts/jquery-3.4.1.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
          
            $('#selectAll').change(function () {
                var isChecked = $(this).prop('checked');
             
                var checkboxes = $('input[name="selectedItems"]');

                if (isChecked) {
              
                    checkboxes.prop('checked', true);
                } else {
                  
                    checkboxes.prop('checked', false);
                }
            });
        });
    </script>

要引入 <script src="~/Scripts/jquery-3.4.1.min.js"></script>
執行畫面如下

勾選抬頭的 checkbox
GridView 的就會全部勾選了